<template>
  <nav>
    <!--首页tab滚动切换模块 可左右滑动切换-->
    <!--<div class=" cjy-scroll " style="overflow-x: scroll;height: 2.5rem ">-->
    <div class="cjy-outer" ref="navhead">

      <ul class="cjy-list">
        <!--滑动位置提示-->
        <li class="cjy-slder">
          <div style="position: absolute; bottom: 0;width: 100%; height: 1px;bottom:0; background: rgb(234, 234, 234)
; "></div>
          <div class="cjy-active-slider" ref="activeSlider"
               :style="{background: titleInfor.length > 0?colorStyle:'transparent' ,width:widths}">
            <div v-if="titleInfor.length <3"
                 style="width: 30px;height: 2px;position: absolute;left:0; right:0;margin: auto;"
                 :style="{background:colorStyle,width:littleWidth}"></div>
          </div>
        </li>
        <!--滑动位置提示end-->


        <!--每个分类选项按钮-->
        <li class="cjy-tab-item" v-if=""
            v-for="(item, index) in titleInfor"
            :key="index"
            :class="{'active-list':activeIndex == index}"
            @click.stop="changeIndex(index)"
            ref="titleLi"
            :style="{color: activeIndex == index ?colorStyle:'' ,width:widths}">
          {{item.goodsClassName}} <span
          v-if="isShowNum ">{{ (item.goodsNum ? '(' + item.goodsNum + ')' : '(0)' )}}</span>
        </li>
        <!--每个分类选项按钮end-->

        <li v-if="titleInfor.length>4 &&pullDownMemu" class="cjy-tab-item" style="width:2rem!important;">
        </li>
      </ul>
    </div>


  </nav>
</template>

<script>
  /*  TabheadOrder  用于头部选择排序的组件*/

  import BScroll from 'better-scroll'

  export default {
    data() {
      return {
        classifyClum: false, //控制下拉菜单的
        widths: '25%',
        littleWidth: '30px',
        isSupportTransfrom: true
      }
    },
    props: {
      pullDownMemu: {
        type: Boolean,
        default: false
      },
      isShowNum: {
        type: Boolean,
        default: false
      },
      titleInfor: {
        type: Array,
        //传入的数据如下 分类名称必传
        default: [{
          goodsClassId: "",
          goodsClassName: "分类",
          goodsNum: ''
        }]
      },
      colorStyle: {
        type: String,
        default: '#299C29'
      }
    },
    components: {},
    watch: {
      activeIndex(newData) {
        this.tapMove(newData)
        this.getLittleWidth()
      },

      titleInfor(data) {
        this.scroll.refresh()

      },
      $route() {
        this.classifyClum = false
      }

    },
    methods: {
      //getwidth
      getLittleWidth() {
        var name = this.titleInfor[this.activeIndex].goodsClassName
        var naemLength = name.split('').length
        this.littleWidth = naemLength * 16 + 'px'
      },
      //初始化宽度
      initWidths() {
        var data = this.titleInfor
        var length = data.length
        this.widths = parseFloat(100 / length).toFixed(2) + '%'
      },
      //tap栏滚动
      tapMove(newData) {
        var testDiv = this.$refs.titleLi
        var index = newData
        var activeTitle = testDiv[index]

        var scrollLeft

        //隐藏部分为将活动的tap设置在头部
//        var minWidth = parseInt(this.scroll.scrollerWidth - this.scroll.wrapperWidth)
//        for (var i = index; i >= 0; i--) {
//          if (testDiv[i].offsetLeft<= minWidth) {
//            scrollLeft =testDiv[i].offsetLeft
//            break
//          }
//        }
//        if (i == 0) {
//          scrollLeft = 0
//        }
        scrollLeft = Math.max(0, activeTitle.offsetLeft - document.body.offsetWidth / 2 + activeTitle.offsetWidth / 2)
        scrollLeft = Math.min(scrollLeft, this.scroll.scrollerWidth - document.body.offsetWidth)

        this.scroll.scrollTo(-scrollLeft, 0, 500, "easing")

        this.sliderMove() //控制滑动条的移动

      },
      closeClassifyClum() {
        this.classifyClum = false
      },


      //更改滑动条的位置和大小
      sliderMove() {

        var activeTitleLi = this.$refs.titleLi[this.activeIndex]
        var activeSlider = this.$refs.activeSlider
        if (this.isSupportTransfrom) {
          activeSlider.style.transform = `translatex( ${activeTitleLi.offsetLeft}px)`

        } else {
          activeSlider.style.left = ` ${activeTitleLi.offsetLeft}px`

        }
        activeSlider.style.width = activeTitleLi.offsetWidth + "px"
      },

      //将所index值传入Vuex  获取index的方法为 this.$store.state.jyM\n\nodules.classifyIndex 直接复制不谢
      changeIndex(index) {
        this.$store.dispatch('cjy/changeClassifyIndex', index)
      },
    },
    computed: {
      activeIndex() {
        return this.$store.state.cjy.classifyIndex
      }
    },
    created() {
      this.isSupportTransfrom = document.body.style.transform != undefined
      this.getLittleWidth()
    },
    mounted() {
      var scroll = new BScroll(this.$refs.navhead, {
        startX: 0,
        startY: 0,
        scrollX: true,
        scrollY: false,
        click: true,
        bounce: false,
        momentumLimitDistance: 5
      })
      this.scroll = scroll
      setTimeout(
        () => {
          this.tapMove(this.activeIndex)
        }, 20
      )
      this.sliderMove()
      this.initWidths()
    },
    updated() {
      this.scroll.refresh()
    }
  }
</script>

<style scoped>
  .classify_select {
    right: 0;
    top: 0;
  }

  .cjy-tab-item {
    padding: 0;

    height: 100%;
    line-height: 2.2rem;
    text-align: center;
    overflow: hidden;
    text-overflow: clip;
    word-break: break-all;
    white-space: inherit;
    /*border-bottom: 2px solid transparent;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0.7rem;
  }

  .active-list {
    /*border-bottom: 2px solid #0f8de0;*/
    color: #0f8de0;;
  }

  .cjy-list {
    display: flex;
    height: 100%;
  }

  .cjy-outer {
    width: 100%;
    height: 2.2rem;
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    /*border-bottom:  solid rgb(234, 234, 234);*/
  }

  .cjy-scroll {
    position: relative;
    height: 100%;
    top: 3rem;
  }

  .aui-col-xs-3 {
    font-size: 0.7rem;
    min-width: 20%;
  }

  .nav-window-enter-active, .nav-window-leave-active {
    transition: all 0.2s;
  }

  .nav-window-enter, .nav-window-leave-to {
    transform: translatey(-100%);
    opacity: 0;
  }

  .cjy-slder {
    height: 100%;
    width: 0;
  }

  .cjy-active-slider {
    line-height: 2px;
    text-align: center;
    height: 100%;
    background: #0f8de0;
    position: absolute;
    bottom: 0;
    height: 2px;
    left: 0;
    z-index: 3;
    transition: transform 0.5s;
  }

</style>
